<template>
	<view class="bgf p30">
		<view v-if="dataList.length > 0" class="mb40">
			<view class="f32">
				{{
					paramData.type == 0
						? '今天'
						: paramData.type == 1
						? '本周'
						: '本月'
				}}是
				<text class="primary-color"
					>{{ dataList[0].endDate }}{{ dataList[0].weekDay }}</text
				>
			</view>
			<view class="f28 g6b mt10">
				共计收到{{
					paramData.type == 0
						? '日'
						: paramData.type == 1
						? '周'
						: '月'
				}}报
				<text
					class="primary-color f28"
					@tap="openPopup(dataList[0].commitUserVOS)"
					>{{ dataList[0].committedCount }}</text
				>
				份，
				<text
					class="primary-color f28"
					@tap="openPopup(dataList[0].commitUserVOS)"
					>{{ dataList[0].committedCount }}</text
				>
				人已提交，
				<text
					class="number-color f28"
					@tap="openPopup(dataList[0].commitUserVOS)"
					>{{ dataList[0].uncommittedCount }}</text
				>
				人未提交以下数据需要关注：
			</view>
		</view>
		<view class="mt20" v-if="histogramData1.categories.length > 0">
			<qiun-data-charts
				:canvas2d="true"
				canvasId="dailyStatic"
				type="column"
				:opts="opts"
				:chartData="histogramData1"
				@getIndex="tapHistogramData1"
			></qiun-data-charts>
		</view>
		<view class="mt20" v-if="histogramData2.categories.length > 0">
			<qiun-data-charts
				:canvas2d="true"
				canvasId="labelStatic"
				type="column"
				:opts="optsTow"
				:chartData="histogramData2"
				@getIndex="tapHistogramData2"
			></qiun-data-charts>
		</view>
		<diy-empty
			v-if="
				histogramData1.categories.length === 0 &&
				histogramData2.categories.length === 0
			"
		></diy-empty>
		<view
			class="p30 box-day pct100 input-radius mt30 pb10"
			v-for="(item, index) in dataList.slice(1)"
			:key="index"
		>
			<view class="f30 mb10">{{ item.endDate }} {{ item.weekDay }}</view>
			<view class="g6b f28">
				共计收到{{
					item.type === 0 ? '日报' : item.type === 1 ? '周报' : '月报'
				}}
				<text
					class="primary-color f28"
					@tap="openPopup(item.commitUserVOS)"
					>{{ item.committedCount }}</text
				>
				份，
				<text
					class="primary-color f28"
					@tap="openPopup(item.commitUserVOS)"
					>{{ item.committedCount }}</text
				>
				人已提交，
				<text
					class="primary-color f28"
					@tap="openPopup(item.commitUserVOS)"
					>{{ item.uncommittedCount }}</text
				>
				人未提交
				<view
					class="f24"
					v-if="item.workJournalCountQuestionVOList.length > 0"
				>
					其中收到
					<text
						v-for="(
							itemC, indexC
						) in item.workJournalCountQuestionVOList"
						:key="indexC"
						@tap="goNewDailyDetail(item, 1)"
					>
						{{ itemC.title }}
						<text class="num-color">{{ itemC.questionCount }}</text>
						条{{
							indexC !=
							item.workJournalCountQuestionVOList.length - 1
								? '、'
								: ''
						}}
					</text>
				</view>
			</view>
			<view
				class="f20 mt30 g6b flex-between flex-wrap"
				:class="item.downSHow ? 'h-64' : ''"
			>
				<view
					class="backf input-radius box-label"
					v-for="(itemB, indexB) in item.workJournalCountLabelVOList"
					:key="indexB"
					@tap="goNewDailyDetail(item, 2, itemB.labelId)"
				>
					<text>{{ itemB.labelName }}</text>
					<text class="primary-color pl10">{{
						itemB.labelCount
					}}</text>
				</view>
				<view
					class="symbol"
					v-for="index of 4 -
					(item.workJournalCountLabelVOList.length % 4)"
					:key="index"
				></view>
			</view>
			<view v-if="item.workJournalCountLabelVOList.length > 4">
				<view
					class="triangle-down tc"
					@tap="showLabelClick(index, false)"
					v-if="item.downSHow"
				></view>
				<view
					class="triangle-up tc"
					@tap="showLabelClick(index, true)"
					v-else
				></view>
			</view>
		</view>
		<uni-popup ref="popupDialog" type="bottom">
			<view class="popup-bd rel">
				<view class="popup-title primary-color">提交情况</view>
				<view class="popup-content">
					<view
						class="pt20 pb20 pl20 pr20 flex-between mb15"
						v-for="(item, index) in currentCommitUserVOS"
						:key="index"
					>
						<view class="f32">{{ item.userName }}</view>
						<view
							:class="item.commintDate ? 'g6b' : 'number-color'"
							>{{
								item.commintDate ? item.commintDate : '未提交'
							}}</view
						>
					</view>
				</view>
				<view class="pt20 flex-center"
					><button
						class="primary-button linear w60 bt30 abs"
						@tap="complete"
					>
						知道了
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			histogramData1: {
				//柱状图Compent  //label应为series value 应为
				categories: [],
				series: [
					{
						name: '日报数据统计',
						data: [],
					},
				],
			},
			histogramData2: {
				//柱状图Compent  //label应为series value 应为
				categories: [],
				series: [
					{
						name: '标签统计',
						data: [],
					},
				],
			},
			opts: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
					fontSize: 12,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			optsTow: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
					fontSize: 12,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			dataList: [],
			hasMore: false,
			paramData: {
				pageIndex: 1,
				pageSize: 5000,
				type: 0,
				orgId: uni.getStorageSync('orgId'),
			},
			currentCommitUserVOS: [],
		}
	},
	onShow() {},
	onLoad(options) {
		console.log(options)
		this.paramData.type = Number(options.type) || 0
		uni.setNavigationBarTitle({
			title:
				this.paramData.type === 0
					? '每日小结'
					: this.paramData.type === 1
					? '每周小结'
					: '每月小结',
		})
		this.getPageList()
	},
	methods: {
		goNewDailyDetail(val, type, labelId) {
			if (type === 1) {
				uni.navigateTo({
					url:
						'/subPackagesLog/pages/workLog/newDailyDetail?type=' +
						this.paramData.type +
						'&endTime=' +
						val.endTime +
						'&templateDetailId=' +
						val.workJournalCountQuestionVOList[0].templateDetailId,
				})
				uni.setStorageSync(
					'workJournalCountQuestionVOList',
					val.workJournalCountQuestionVOList
				)
			} else {
				uni.navigateTo({
					url:
						'/subPackagesLog/pages/workLog/newDailyDetail?type=' +
						this.paramData.type +
						'&endTime=' +
						val.endTime +
						'&templateId=' +
						val.workJournalCountLabelVOList[0].templateId +
						'&labelId=' +
						labelId,
				})
				let workJournalCountLabelVOListAll = []
				workJournalCountLabelVOListAll = JSON.parse(
					JSON.stringify(val.workJournalCountLabelVOList)
				)
				workJournalCountLabelVOListAll.unshift({
					labelId: -1,
					labelName: '全部',
					templateId: workJournalCountLabelVOListAll[0].templateId,
					labelCount: val.labelTotalCount,
				})
				uni.setStorageSync(
					'workJournalCountLabelVOList',
					workJournalCountLabelVOListAll
				)
			}
		},
		tapHistogramData1(e) {
			let currentIndex = e.currentIndex.index
			this.dataList[0].workJournalCountQuestionVOList.map(
				(item, index) => {
					if (currentIndex === index) {
						uni.navigateTo({
							url:
								'/subPackagesLog/pages/workLog/newDailyDetail?type=' +
								this.paramData.type +
								'&endTime=' +
								this.dataList[0].endTime +
								'&templateDetailId=' +
								item.templateDetailId +
								'&index=' +
								currentIndex,
						})
						uni.setStorageSync(
							'workJournalCountQuestionVOList',
							this.dataList[0].workJournalCountQuestionVOList
						)
					}
				}
			)
		},
		tapHistogramData2(e) {
			let currentIndex = e.currentIndex.index
			this.dataList[0].workJournalCountLabelVOList.map((item, index) => {
				if (currentIndex === index) {
					uni.navigateTo({
						url:
							'/subPackagesLog/pages/workLog/newDailyDetail?type=' +
							this.paramData.type +
							'&endTime=' +
							this.dataList[0].endTime +
							'&templateId=' +
							item.templateId +
							'&labelId=' +
							item.labelId,
					})
					let workJournalCountLabelVOListAll = []
					workJournalCountLabelVOListAll = JSON.parse(
						JSON.stringify(
							this.dataList[0].workJournalCountLabelVOList
						)
					)
					console.log(workJournalCountLabelVOListAll)
					workJournalCountLabelVOListAll.unshift({
						labelId: -1,
						labelName: '全部',
						templateId:
							workJournalCountLabelVOListAll[0].templateId,
						labelCount: this.dataList[0].labelTotalCount,
					})
					uni.setStorageSync(
						'workJournalCountLabelVOList',
						workJournalCountLabelVOListAll
					)
				}
			})
		},
		//数据赋值
		setStaticData(data, type) {
			if (data.length > 5) {
				data = data.slice(0, 5)
			}
			if (type === 1) {
				this.histogramData1.categories = []
				this.histogramData1.series[0].data = []
				if (data && data.length) {
					this.histogramData1.categories = data.map((item, index) => {
						return item.title.substr(0, 4) + '...'
					})
					this.histogramData1.series[0].data = data.map(
						(item, index) => {
							return item.questionCount
						}
					)
					let maxNum = Math.max.apply(
						null,
						this.histogramData1.series[0].data
					)
					if (maxNum < 5 || maxNum % 5 > 0) {
						this.opts.yAxis.data[0].max = maxNum
						this.opts.yAxis.splitNumber = maxNum
					}
				}
			} else {
				this.histogramData2.categories = []
				this.histogramData2.series[0].data = []
				if (data && data.length) {
					this.histogramData2.categories = data.map((item, index) => {
						return item.labelName
					})
					this.histogramData2.series[0].data = data.map(
						(item, index) => {
							return item.labelCount
						}
					)
					let maxNum = Math.max.apply(
						null,
						this.histogramData2.series[0].data
					)
					if (maxNum < 5 || maxNum % 5 > 0) {
						this.optsTow.yAxis.data[0].max = maxNum
						this.optsTow.yAxis.splitNumber = maxNum
					}
				}
			}
		},
		//查询分页列表
		getPageList() {
			let _that = this
			this.$request
				.request(
					'carer-platform/journal/workJournal/getWorkJournalSummaryPageByType',
					{
						method: 'post',
						data: this.paramData,
					}
				)
				.then((res) => {
					if (res.success) {
						if (res.data.data && res.data.data.length) {
							_that.dataList = _that.dataList.concat(
								res.data.data
							)
							_that.dataList.map((item) => {
								_that.$set(item, 'downSHow', true)
							})
							_that.hasMore = true
							_that.setStaticData(
								_that.dataList[0]
									.workJournalCountQuestionVOList,
								1
							)
							_that.setStaticData(
								_that.dataList[0].workJournalCountLabelVOList,
								2
							)
						} else {
							_that.hasMore = false
						}
					}
				})
		},
		showLabelClick(indexS, type) {
			this.dataList.map((item, index) => {
				if (indexS === index) {
					this.$set(item, 'downSHow', type)
				}
			})
		},
		complete() {
			this.$refs.popupDialog.close()
		},
		openPopup(val) {
			this.currentCommitUserVOS = val
			this.$refs.popupDialog.open('center')
		},
	},
	// onReachBottom() {
	// 	if (this.hasMore) {
	// 		this.paramData.pageIndex = this.paramData.pageIndex + 1
	// 		this.getPageList()
	// 	}
	// }
}
</script>

<style lang="scss" scoped>
.box-day {
	background: linear-gradient(90deg, #eaf5ff 0%, #edf6ff 100%);
	box-sizing: border-box;
}
.num-color {
	color: #ef7373;
}
.box-label {
	height: 56rpx;
	line-height: 56rpx;
	width: 140rpx;
	margin-bottom: 15rpx;
	text-align: center;
}
.symbol {
	width: 140rpx;
}
.triangle-down::after {
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid $active-color; //白色
	border-top-color: $active-color;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}
.triangle-up::after {
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid $active-color; //白色
	border-top-color: transparent;
	border-bottom-color: $active-color;
	border-left-color: transparent;
	border-right-color: transparent;
}
.h-64 {
	height: 64rpx;
	overflow: hidden;
}
.popup-title {
	background: linear-gradient(90deg, #e3edff 0%, rgba(223, 234, 255, 0) 100%);
}
.popup-bd {
	width: 608rpx;
	max-height: 694rpx;
	border-radius: 20rpx;
}
.popup-content {
	height: 430rpx;
	overflow: auto;
}
.bt30 {
	bottom: 30rpx;
}
</style>
